<template>
  <Modal
    :scrollable='false'
    :closable='false'
    fullscreen
    footer-hide
    class="GDT_BODY"
    v-model="visible">
    <Row class="ppt_body" :gutter="15" style="margin: -15px">
      <i-col span="24" style="padding: 0">
        <Card :bordered="false" dis-hover>
          <div slot="title">
            {{file_data.file_name}} <span> &nbsp;</span>
            <Button size="small" style="float: right;margin-top: -5px;" type="error" @click="visible = false">返回文件列表
            </Button>
            <Button v-show="unaudit_btn" size="small" style="float: right;margin-top: -5px; margin-right: 5px"
                    type="warning" @click="audit_file()">反审核
            </Button>
            <Button v-show="display_dow !=='none'" size="small" style="float: right;margin-top: -5px; margin-right: 5px"
                    type="success" @click="dow_modal = true">下载
            </Button>
            <ButtonGroup size="small" shape="circle" style="float: right;margin-top: -5px;margin-right: 10px">
              <Button @click="scale_fn(0)">缩小</Button>
              <Button @click="scale_fn(1)">放大</Button>
            </ButtonGroup>
          </div>
          <!--<div v-if="fileType === 'PDF' || fileType === 'TXT'" @mousewheel="handleScroll" style="text-align: center">-->
          <div v-if="fileType === 'PDF' || fileType === 'TXT'" style="text-align: center;overflow: hidden">
            <pdf :style="{width: scale_number +'%' ,margin: '0 auto 20px'}"
                 class="pdf_body"
                 :src="src"
                 :page="1"
                 @num-pages="pageCount=$event"
                 @page-loaded="currentPage=$event"></pdf>
            <pdf :style="{width: scale_number +'%' ,margin: '0 auto 20px'}"  :src="src"  :page="2"></pdf>
            <pdf v-if="i > 2" :style="{width: scale_number +'%' ,margin: '0 auto 20px'}" v-for="i in currentPage" :src="src" :key="i"
                 :id="i" :page="i"></pdf>
            <div ></div>
            <div v-if="shoe_lidg" class="show_loding">加载中···</div>
            <div v-if="shoe_bottom" class="show_loding">已经是最后一页了</div>
            <!--<div style="padding: 15px;text-align: right" @keyup.down="changePdfPage (1)">
              <Page show-elevator
                    :current ='currentPage'
                    :total="pageCount"
                    :page-size="1"
                    size="small"
                    @on-change="change_page"/>
            </div>-->
          </div>


          <div v-else-if="fileType === 'PNG' || fileType === 'JPEG' || fileType === 'JPG' || fileType === 'GIF'">

            <!--<div style="padding: 15px;text-align: center;margin: 0 auto" >
              <ButtonGroup  size="small" shape="circle">
                <Button   @click="scale_fn(0)">缩小</Button>
                <Button   @click="scale_fn(1)">放大</Button>
              </ButtonGroup>
            </div>-->
            <div :style="{width: scale_number +'%' ,margin: '0 auto'}">
              <img :src="src" :key="src" alt="" style="width: 100%">
            </div>
          </div>

          <div v-else-if="fileType === 'MP3' || fileType === 'MP4' || fileType === 'FLV' || fileType === 'AVI' ||
             fileType === 'RMVB' || fileType === 'MPG' || fileType === 'MTS'">
            <video :src="video_src" controls="controls" width="100%">
              该视屏格式不能播放，请下载后自行打开。
            </video>
          </div>
          <Alert v-else type="success" style="text-align: center;font-size: 25px;line-height: 90px;">
            该种文件类型不支持预览，请自行下载查看。
          </Alert>
        </Card>
      </i-col>
      <Spin fix v-if="spinShow">
        <Icon type="ios-loading" size=18    class="demo-spin-icon-load"></Icon>
        <div>文件加载中...</div>
      </Spin>
    </Row>
    <Modal
      v-model="dow_modal"
      width="260"
      title="提示">

      <p>确定下载该文件吗？</p>
      <div slot="footer">
        <Button size="large" @click="dow_modal = false">取消</Button>
        <a :href="file_src" download="">
          <Button size="large" type="primary">确定</Button>
        </a>
      </div>
    </Modal>
    <div class="ivu-back-top return_top" style="position: fixed;  bottom: 30px; right: 30px; z-index: 9999;" @click="toTop">
      <div class="ivu-back-top-inner">
        <i class="ivu-icon ivu-icon-ios-arrow-up"></i>
      </div>
    </div>
  </Modal>
</template>

<script>
  import pdf from 'vue-pdf'

  export default {
    components: {pdf},
    data() {
      return {
        visible: false,
        file_id: '',
        file_src: '',
        numPages: 0,
        display_dow: 'none',
        scale_number: 80, //初始放大倍数
        spinShow: true,//加载提示
        dow_modal: false,//下载提示
        btnFlag: false,//返回顶部按钮
        unaudit_btn: false,//是否显示反审核按钮
        currentPage: 3, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'PDF', // 文件类型
        src: '', // pdf文件地址
        file_data: {
          file_name: '',
        },
        file_class: [],
        shoe_lidg: false,
        shoe_bottom: false,
        old_file_class: [],
        index_number: 0,//默认第一次访问第一个文件
        video_src: '',
        user_Data: {id: 0},
        scrollDiv: null
      }
    },
    methods: {
      init() {
        this.visible = true
        this.$nextTick(() => {
          this.file_src = ''
          this.src = ''
          this.CD_.user_Data = JSON.parse(window.localStorage.getItem('user_Data'));
          this.user_Data = this.CD_.user_Data;
          this.getFile_data();
          this.getBtnList(); //判断是否能反审核
        })
      },
      getBtnList() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/16 21:36
        *=======================================================
        *@function  获取页面按钮
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getBtnList',
          data: {
            menu_id: 96,
            user_id: this.user_Data.id
          }
        }).then(function (res) {
          var json = res.data;

          if (json.status) {
            if (json.btn_list.indexOf('unaudit') !== -1) {
              this.unaudit_btn = true
            } else {
              this.unaudit_btn = false
            }
          } else {
            this.unaudit_btn = false
          }

        }.bind(this)).catch(function (err) {
//          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))


      },
      audit_file() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/15 16:52
        *=======================================================
        *@function  审核文件
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/auditFile',
          data: {
            state: "Disable",
            id: this.file_id
          }
        }).then(function (res) {
          var json = res.data;
          console.log(res.data)
          if (json.status) {
            this.$Notice.success({title: json.msg});
          } else {
            this.$Notice.error({title: json.msg});
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '审核失败', desc: '错误：' + err});
          this.isLoading = false;
        }.bind(this))
      },
      changePdfPage(val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      scale_fn(val) {
        if (val === 0 && this.scale_number > 10) {
          this.scale_number -= 10
        }
        if (val === 1 && this.scale_number < 100) {
          this.scale_number += 10
        }
      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.currentPage = page;
      },
      select_file(index) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/19 10:57
        *=======================================================
        *@function  选择文件
        *=====================================================*/
        this.index_number = index;

        this.getFile_data();

      },
      getFile_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取文件
        *=====================================================*/
        this.spinShow = true;
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFileView',
          data: {
            file_id: this.file_id,
            index: this.index_number
          }
        }).then(function (res) {
          var json = res.data;

          this.old_file_class = json.file_data.old_file_class.split(",");
          this.file_class = json.file_data.file_class.split(",");

          this.fileType = this.file_class[0];
          if (json.status) {
            if (this.fileType === 'MP4' || this.fileType === 'FLV'
              || this.fileType === 'RMVB' || this.fileType === 'MPG' || this.fileType === 'AVI'
              || this.fileType === 'MTS' || this.fileType === 'MP3') {

              if (window.location.host != '127.0.0.1:8080') {
                this.video_src = 'http://' + window.location.host + json.file_data.file_src;
              } else {
                this.video_src = this.CD_.file_src + json.file_data.file_src;
              }


              if (this.fileType !== 'MP3') {
                var index = this.video_src.lastIndexOf("\.")
                this.video_src = this.video_src.substring(0, index + 1) + 'MP4';
              }
            } else {
              this.src = json.base64_file;
            }
            if (window.location.host != '127.0.0.1:8080') {
              this.file_src = 'http://' + window.location.host + json.file_data.file_src;
            } else {
              this.file_src = this.CD_.file_src + json.file_data.file_src;
            }
            this.file_data = json.file_data;
          } else {
            this.$Notice.error({title: '文件不存在~~~'});
          }
          this.spinShow = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({
            title: '文件加载失败',
            duration: 20,
            desc: '此文件可能存在问题，如果是office文件请将文件另存为高版本，并去【文件审核】中删除此文件，再次上传。'
          });
          this.spinShow = false;

          this.fileType = 'TSWZ';
        }.bind(this))

      },
      handleScroll(e) {
        if (e.deltaY > 0) {
          this.changePdfPage(1);
        } else {
          this.changePdfPage(0);
        }

      },
      toTop() {
        var h = this.scrollDiv.scrollTop;
        var _this = this
        var subH = parseInt(h / 50);
        var timer = setInterval(function () {
          h -= subH;
          if (h <= 0) {
            _this.scrollDiv.scrollTop = 0;
            clearInterval(timer);
          } else {
            _this.scrollDiv.scrollTop = h;
          }
        }, 5)
      }
    },
    mounted() {
      this.scrollDiv = document.querySelector('.GDT_BODY .ivu-modal-body')

      var _this = this
      this.scrollDiv.addEventListener('scroll', function () {
        var scrollHeightNumaber = _this.scrollDiv.scrollHeight
        var clientHeightNumaber = _this.scrollDiv.clientHeight
        var bottomNumber = scrollHeightNumaber - _this.scrollDiv.scrollTop - clientHeightNumaber

        if(bottomNumber < 500){
          _this.shoe_lidg = true
          setTimeout(function () {
            _this.shoe_lidg = false
          },3000)

          if(bottomNumber == 0){
            _this.shoe_bottom = true
            setTimeout(function () {
              _this.shoe_bottom = false
            },3000)
          }
          if(_this.currentPage <= _this.pageCount){
            _this.currentPage +=2
          }
        }
        if (_this.scrollDiv.scrollTop > 100) {
          document.querySelector('.return_top').style.display = "block"
        } else {
          document.querySelector('.return_top').style.display = "none"
        }
      });
    }
  }
</script>
<style scoped>
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

  .video-js .vjs-big-play-button {
    border-radius: 150px;
    color: #000000;
  }

  .ppt_body {
    z-index: 888;
  }
  .show_loding{
    position: fixed;
    bottom: 10px;left: 10px;
    line-height: 30px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.6);
    color: #ffffff;
    font-size: 14px;
    padding: 0 20px;
  }
</style>
